<template>
  <div id="contentExamined">
    <h1 class="con-right-title">
      活动内容审核
    </h1>
    <!-- 上部搜索条件 -->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <div class="table-conBtn">
      <el-button type="warning" icon="el-icon-check" @click="passWork">
        通过
      </el-button>
      <el-button type="warning" icon="el-icon-close" plain @click="noPass">
        不通过
      </el-button>
      <freshCom @searchList="LoadLabel"></freshCom>
      <selectColumn
        ref="selectCum"
        @setColumn="setColumns"
        :nameList="columnList"
      ></selectColumn>
    </div>
    <!-- 表格部分 -->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%;"
      @selection-change="handleSelectionChange"
      max-height="490"
      ref="table"
    >
      <el-table-column
        type="selection"
        width="45"
        align="center"
      ></el-table-column>
      <el-table-column type="index" width="50" align="center" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.avatar"
        label="头像"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <listImgString :imgInfo="scope.row.user.avatar"></listImgString>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.name"
        label="昵称"
        prop="user.name"
        min-width="60"
      >
        <template slot-scope="scope">
          {{ scope.row.user && scope.row.user.name ? scope.row.user.name : '' }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.dpAccount"
        label="大鹏号"
        prop="user.dpAccount"
        min-width="80"
      >
        <template slot-scope="scope">
          {{
            scope.row.user && scope.row.user.dpAccount
              ? scope.row.user.dpAccount
              : ''
          }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.contentType"
        label="类型"
        prop="contentType"
        min-width="70"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.contentType"
            class="tag-span"
            :class="scope.row.contentType | filterClass('contentType')"
            >{{ scope.row.contentType | filterName('contentType') }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.activityCategory"
        label="活动分类"
        prop="tags.activityCategory"
        min-width="100"
      >
        <template slot-scope="scope">
          <span
            v-if="
              filterName(scope.row.tags.activityCategory, 'activityCategory')
            "
            class="tag-span"
            :class="
              scope.row.tags.activityCategory | filterClass('activityCategory')
            "
          >
            {{
              filterName(scope.row.tags.activityCategory, 'activityCategory')
            }}</span
          >
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.activityName"
        label="活动名称"
        prop="category.activityName"
        min-width="80"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.category.state === 'DELETE'">{{
            scope.row.category.activityName + '(已删除)'
          }}</span>
          <span v-else>{{ scope.row.category.activityName }}</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.content"
        label="文字内容"
        prop="content"
        min-width="180"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.content.text"
            class="textContent"
            v-html="filterContent(scope.row.content.text)"
            @click="handleDetail(scope.row)"
            >{{ scope.row.content.text }}</span
          >
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.imgJson"
        label="视图预览"
        min-width="110"
      >
        <template slot-scope="scope">
          <listImgShow :imgInfo="scope.row.content.imgJson"></listImgShow>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.createdDate"
        label="创建时间"
        prop="createdDate"
        min-width="90"
      >
        <template slot-scope="scope">
          {{ scope.row.createdDate }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.userProperty"
        label="用户属性"
        prop="userProperty"
        min-width="80"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.userProperty"
            class="tag-span"
            :class="scope.row.userProperty | filterClass('activityAttr')"
            >{{ scope.row.userProperty | filterName('activityAttr') }}</span
          >
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.machineAuditTime"
        label="机审时间"
        prop="machineAuditTime"
        min-width="90"
      >
        <template slot-scope="scope">
          {{ scope.row.machineAuditTime }}
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.machineResult"
        label="机审结果"
        prop="machineResult"
        min-width="80"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.machineResult === 'PASSED'"
            class="tag-span primary"
            >通过</span
          >
          <span
            v-else-if="scope.row.machineResult === 'REJECTED'"
            class="tag-span warning"
            >未通过</span
          >
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.manualResult"
        label="人工审核结果"
        prop="manualResult"
        min-width="110"
      >
        <template slot-scope="scope">
          <span
            v-if="scope.row.manualResult === 'NONE'"
            class="tag-span warning"
            >未审核</span
          >
          <span
            v-else-if="scope.row.manualResult === 'PASSED'"
            class="tag-span primary"
            >通过</span
          >
          <span
            v-else-if="scope.row.manualResult === 'REJECTED'"
            class="tag-span default"
            >未通过</span
          >
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.checkUserName"
        label="审核人"
        prop="checkUserName"
        min-width="70"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.checkUserName">
            {{ scope.row.checkUserName }}
          </div>
          <div v-else>
            -
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.manualAuditTime"
        label="人工审核时间"
        prop="manualAuditTime"
        min-width="110"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.manualAuditTime">{{
            scope.row.manualAuditTime
          }}</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columnSHow.labelPrope"
        label="显性标签"
        prop="labelPrope"
        min-width="260"
      >
        <template slot-scope="scope">
          <explicitTag
            :labels="scope.row.labels"
            :showContentId="scope.row.id"
            @refresh="refresh"
          ></explicitTag>
        </template>
      </el-table-column>
      <el-table-column label="操作" min-width="200">
        <template slot-scope="scope">
          <el-button
            v-if="
              scope.row.manualResult === 'NONE' ||
                scope.row.manualResult === 'PASSED'
            "
            type="text"
            @click="handleDetail(scope.row)"
          >
            查看详情
          </el-button>
          <el-button
            v-if="scope.row.manualResult === 'PASSED'"
            type="text"
            @click="handleDel(scope.row.id)"
          >
            删除
          </el-button>
          <el-button
            v-if="scope.row.manualResult === 'NONE'"
            type="text"
            @click="handlPassWord(scope.row.id)"
          >
            通过
          </el-button>
          <el-button
            v-if="scope.row.manualResult === 'NONE'"
            type="text"
            @click="handlNotPassWord(scope.row.id)"
          >
            未通过
          </el-button>
          <el-button
            v-if="scope.row.manualResult === 'REJECTED'"
            type="text"
            @click="handlNotPass(scope.row)"
          >
            未通过理由
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="LoadLabel"
    ></pageCom>

    <!-- 未通过和删除弹窗 -->
    <delDialog
      :del-dialog-data="delDialogData"
      @reasonDel="reasonDel"
    ></delDialog>
    <!-- 查看详情 dialog -->
    <detailDialog
      v-if="detailData.isShow"
      :detail-data="detailData"
    ></detailDialog>
  </div>
</template>
<script>
import {
  getSearchList,
  passSingleAPI,
  passMultAPI,
  failMultRequestAPI,
  failSingleRequestAPI
} from '@/api/activeManagement/contentExamined' // 接口
import topSearch from '@component/activeManagement/contentExamined/topSearch' // 上部搜索条件
import delDialog from '@component/common/delDialog' // 删除和未通过弹窗
import { contentToStr } from '@utils/pubFunction' // 内容筛选
import detailDialog from '@component/activeManagement/contentExamined/detailDialog' // 查看详情弹窗
import { saveScrollMixins } from '@/mixins/saveScroll'
import { columnMixin } from '@/mixins/columnShowHide'
import explicitTag from '@common/explicitTag'
import listImgString from '@common/listImgString' // 视图预览(返回值为字符串结构)-公共组件
export default {
  name: 'contentExamined',
  msg: '活动管理-活动帖子内容审核页面',
  mixins: [saveScrollMixins, columnMixin],
  components: {
    topSearch,
    delDialog,
    detailDialog,
    explicitTag,
    listImgString
  },
  data() {
    return {
      loading: false,
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      // 搜索条件
      formInline: {
        manual: '', // 人审结果
        machine: '', // 机审结果
        sort: '', // 排序规则
        tags: '', // 活动分类
        contentType: '', // 帖子类型
        activityId: '', // 活动名称
        content: '', // 内容查询
        timeType: '',
        userType: '', // 用户搜索
        timeLine: '', // 时间线
        checkUserId: '', // 审核人
        userValue: '',
        userProperty: '', // 用户属性
        startTime: '', // 开始时间
        endTime: '', // 结束时间
        createTime: []
      },
      tableData: [],
      delDialogData: {
        isShow: false, // 默认隐藏
        params: '', // 编辑时，传递的参数
        type: ''
      },
      // 查看详情
      detailData: {
        // 默认隐藏
        isShow: false,
        params: ''
      },
      powerAry: [],
      canShowPage: false,
      powerStr: 'system:postsContentExamined:list',
      // 选中的行
      multipleSelection: [],
      columnList: [
        { label: '头像', value: 'avatar' },
        { label: '昵称', value: 'name' },
        { label: '大鹏号', value: 'dpAccount' },
        { label: '类型', value: 'contentType' },
        { label: '活动分类', value: 'activityCategory' },
        { label: '活动名称', value: 'activityName' },
        { label: '文字内容', value: 'content' },
        { label: '视图内容', value: 'imgJson' },
        { label: '创建时间', value: 'createdDate' },
        { label: '用户属性', value: 'userProperty' },
        { label: '机审时间', value: 'machineAuditTime' },
        { label: '机审结果', value: 'machineResult' },
        { label: '人工审核结果', value: 'manualResult' },
        { label: '审核人', value: 'checkUserName' },
        { label: '人工审核时间', value: 'manualAuditTime' },
        { label: '显性标签', value: 'labelPrope' }
      ]
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
        this.$refs['selectCum'].setChoose(this.columnAry)
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        this.canShowPage = true
        if (!res.includes(this.powerStr)) {
          this.alertPower(this.powerStr)
          return false
        }
      })
    },
    /* 获取列表 */
    LoadLabel() {
      this.loading = true
      let params = Object.assign({}, this.searchParams, this.formInline)
      delete params.createTime
      getSearchList(
        params,
        (response) => {
          this.tableData = response.rows

          this.total = response.total
          this.loading = false
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    /* 根据 id 转换为：类型（图文、小视频）/学院名称 */
    filterName(id, name) {
      let obj = this.$store.state['valueTokey'][name]
      if (id && obj && obj[id]) {
        return obj[id].name
      }
      return ''
    },
    // checkbox选中事件
    handleSelectionChange(val) {
      this.multipleSelection = val
      if (this.multipleSelection.length === 0) {
      }
    },
    /* 批量通过  */
    passWork() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      this.$confirm(
        `确认要通过选中的${this.multipleSelection.length}条数据吗?`,
        '删除提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        let ids = []
        this.multipleSelection.forEach((item) => {
          ids.push(item.id)
        })
        let obj = ids
        passMultAPI(
          obj,
          (response) => {
            this.LoadLabel()
          },
          (response) => {
            this.$message({
              message: '删除失败,' + response.message,
              type: 'warning'
            })
          }
        )
      })
    },
    /* 过滤返回评论内容 */
    filterContent(item) {
      return contentToStr(item)
    },
    /* 批量不通过  */
    noPass() {
      if (this.multipleSelection.length <= 0) {
        this.$message.warning('请至少选择一条数据！')
        return
      }
      let ids = []
      this.multipleSelection.forEach((item) => {
        ids.push(item.id)
      })
      this.id = ids
      this.delDialogData.isShow = true
    },
    reasonDel(reason) {
      let type = this.delDialogData.type
      this.$confirm(
        `${type}理由：${reason} 确认${type}该条信息？`,
        '系统提示',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      ).then(() => {
        if (this.id instanceof Array) {
          this.failMultRequest(this.id, reason)
        } else {
          this.failSingle(this.id, reason)
        }
        this.delDialogData.isShow = false
      })
    },
    // 单个不通过请求
    failSingle(id, reason) {
      let params = {
        reason
      }
      failSingleRequestAPI(
        id,
        params,
        (response) => {
          this.LoadLabel()
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
          this.LoadLabel()
        }
      )
    },
    // 批量不通过请求
    failMultRequest(ids, reason) {
      let params = { ids, reason }
      failMultRequestAPI(params, (response) => {
        this.$message({
          message: '操作成功',
          type: 'success'
        })
        this.LoadLabel()
      })
    },
    // 提交
    handelsubmit() {
      this.$confirm('确定要提交该消息吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {})
    },
    // 查看详情
    handleDetail(item) {
      this.detailData.isShow = true
      this.detailData.params = item.id
    },
    // 删除
    handleDel(id) {
      this.delDialogData.isShow = true
      this.id = id
      this.delDialogData.type = '删除'
    },
    /* 通过 */
    handlPassWord(id) {
      this.$confirm('确定审核通过该条帖子内容审核信息吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        passSingleAPI(
          id,
          (response) => {
            this.LoadLabel()
          },
          (response) => {
            this.$message({
              message: response.message,
              type: 'warning'
            })
          }
        )
      })
    },
    // 未通过
    handlNotPassWord(id) {
      this.id = id
      this.delDialogData.isShow = true
      this.delDialogData.type = '不通过'
    },
    // 未通过理由
    handlNotPass(row) {
      this.$confirm(`${row.reason}`, '未通过理由', {
        showConfirmButton: false
      }).then(() => {})
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.LoadLabel()
    },
    /* 刷新列表 */
    refresh() {
      this.toSearch()
    },
    /* 重置 */
    reset() {},
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.LoadLabel()
    }
  }
}
</script>
<style lang="less">
#contentExamined {
  @import url('~@common/style/imgBox.less');
  .textContent {
    cursor: pointer;
  }
  .table-conBtn {
    padding-left: 30px !important;
  }
  .el-table {
    margin-top: 20px;
  }
}
</style>
